<template>
	<view class="container">
		<view class="catalog">
			<view>
				<text>姓名</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.userName" placeholder="请输入真实姓名"
					placeholder-class="plaho" />
			</view>
			<view>
				<text>身份证号</text>
				<input :disabled="hasAccount" maxlength="18" v-model="userBank.idCard" placeholder="请输入身份证号"
					placeholder-class="plaho" />
			</view>
			<view>
				<text>卡号</text>
				<input @input="getBankName" :disabled="hasAccount" type="number" v-model="userBank.account"
					placeholder="请输入银行卡号" placeholder-class="plaho" />
			</view>
			<view>
				<text>银行</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.bank" placeholder="请输入银行名称"
					placeholder-class="plaho" />
			</view>
			<view @tap="openAddres3">
				<text>开户地区</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.openAddress" placeholder="请输入详细开户地址"
					placeholder-class="plaho" />
			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
		<view class="button" @click="handleBindBank(hasAccount)">{{ hasAccount ? '更改账号' : '立即绑定'}}</view>
	</view>
</template>
<script>
	import findKey from '@/libs/find-key.js'
	import bankCardAttribution from '@/libs/bank-card.js'
	import placesMap from '@/libs/place-map.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				hasAccount: false,
				startKey: [33, 3307, 330782], //初始开户地址
				cityPickerValueDefault: [16, 11, 0],
				pickerText: '',
				showAddress: '', //显示的开户地址
				userBank: { //提交账户参数
					account: '',
					userName: '',
					idCard: '',
					bank: '',
					openAddress: '',
					type: 2, //银行卡2
				},
				province: [],
				city: [],
				district: [],
				place: {},
				placeKey: [],
				p: '',
				provinceWord: '',
				c: '',
				cityWord: '',
				districtWord: '',
			}
		},
		methods: {
			// 弹出省市区选择框
			openAddres3() {
				// if(this.hasAccount) return
				// // 根据value ,
				// let index = this.$refs.simpleAddress.queryIndex(this.startKey, 'value');
				// console.log('openAddres3', index);
				// this.cityPickerValueDefault = index.index;
				// this.$refs.simpleAddress.open();
			},
			// 确认省市区
			onConfirm(e) {
				console.log('onConfirme', e)
				this.showAddress = e.label
				this.userBank.openAddress = e.provinceCode + ',' + e.cityCode + ',' + e.areaCode
				// this.pickerText = JSON.stringify(e);
				console.log('this.userBank.openAddress', this.userBank.openAddress)
			},
			// 提交绑定
			async handleBindBank(flag) {
				if (flag == true) {
					this.hasAccount = false
					this.userBank.account = ''
					this.userBank.userName = ''
					this.userBank.bank = ''
					this.userBank.idCard = ''
					this.userBank.openAddress = ''
					this.showAddress = ''
				} else {
					// this.userBank.bank = bankCardAttribution(this.userBank.account).bankName
					console.log('提交前this.userBank', this.userBank.bank, bankCardAttribution(this.userBank.account)
						.bankName)
					if (!this.userBank.userName.trim()) return uni.showToast({
						title: '请输入真实姓名~',
						icon: 'none'
					})
					if (!this.userBank.account.trim()) return uni.showToast({
						title: '请输入银行账号~',
						icon: 'none'
					})
					if (this.userBank.idCard.length != 18) return uni.showToast({
						title: '请输入正确身份证号~',
						icon: 'none'
					})
					if (!this.userBank.bank) return uni.showToast({
						title: '请输入银行~',
						icon: 'none'
					})
					if (!this.userBank.openAddress) return uni.showToast({
						title: '请选择开户地区~',
						icon: 'none'
					})
					let res = await this.$fetch(this.$api.bind_user_bank, this.userBank, 'POST', 'JSON')
					if (res.code) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.msg == '绑定失败:请先进行实名认证') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/real-name/real-name'
								})
							}, 800)
						}
						return
					}
					this.hasAccount = true
					uni.showToast({
						title: '绑定成功~',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				}
			},
			// 获取银行名称
			getBankName() {
				console.log('银行名字', bankCardAttribution(this.userBank.account).bankName)
				if (bankCardAttribution(this.userBank.account).bankName == undefined) return
				this.userBank.bank = bankCardAttribution(this.userBank.account).bankName
				// '6217001210024455220'
			},
			// 取消选择
			cancelBind() {
				this.userBank.openAddress = ''
			},
			// 获取已绑定的账号
			async query_bind_user_bank() {
				let res = await this.$fetch(this.$api.query_bind_user_bank, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				res.data.forEach(item => {
					if (item.type === 2) {
						this.userBank.account = item.account
						this.userBank.userName = item.userName
						this.userBank.idCard = item.idCard
						this.userBank.bank = item.bank
						this.userBank.openAddress = item.openAddress
					}
				})
				if (this.userBank.account) {
					this.hasAccount = true
					this.startKey = this.userBank.openAddress ? this.userBank.openAddress.split(',') : [33, 3307,
						330782
					]
					console.log('this.startKey', this.startKey)
					this.showAddress = this.place[this.startKey[0] + '0000'] + '-' + this.place[this.startKey[1] +
						'00'] + '-' + this.place[this.startKey[2]]
				}
			},
		},
		onLoad() {
			this.place = placesMap()
			this.query_bind_user_bank()
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		// border: 1px solid #000000;
		overflow: hidden;

		.catalog {
			margin-top: 30rpx;
			background-color: #FFFFFF;

			&>view {
				padding: 0 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>image {
					width: 16rpx;
					height: 26rpx;
				}

				&>text {
					height: 40rpx;
					margin: 30rpx 0;
				}

				&>input {
					flex: 1;
					text-align: right;
					font-size: 14px;
					font-weight: bold;
					background: transparent;
				}

				.plaho {
					font-weight: normal;
					font-size: 14px;
					color: rgba(64, 33, 16, 0.50);
				}

				&>view {
					display: flex;
					align-items: center;

					&>text {
						font-weight: bold;
					}

					&>image {
						margin-left: 30rpx;
						width: 16rpx;
						height: 26rpx;
					}
				}

				&::after {
					content: "";
					position: absolute;
					top: 100rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
				}
			}
		}

		.button {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 100rpx;
			background: #FCC928;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 0;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>